<template>
  <div class="tc-checkbox-group">
    <el-checkbox-group @change="handleChange" v-model="changeValue" v-bind="{ ...item }">
      <template v-for="option in item.config.options">
        <div
          v-if="!isHideQuota(option)"
          :key="option.value"
          class="show-vote"
          :class="[
            item.config.inline ? 'inline-block' : 'block',
            isChecked(option.value) ? 'checked' : '',
            item.disabled ? 'disabled' : ''
          ]"
        >
          <t-checkbox :label="option.value" :disabled="option.quotaSetting && getSurplusQuota(option) <= 0">
            <span v-if="getSurplusQuota(option) <= 0 && item.config.quotaBlankWarning">{{
              item.config.quotaBlankWarning
            }}</span>
            <span v-else>{{ option.label }}</span>
            <span class="text-muted" v-if="showQuota(option)">(余{{ getSurplusQuota(option) }})</span>
          </t-checkbox>

          <div class="vote-wrap">
            <el-input
              v-if="option.value === 0 && isChecked(option.value)"
              v-model="otherInputValue"
              class="other-input"
            />
            <vote
              :value="option.value"
              :vote-list="voteList"
              :total-vote="totalVote"
              v-if="item.config.showVoteResult"
            />
          </div>
        </div>
      </template>
      <!--      <template v-else>
              <template v-for="option in item.config.options">
                <el-checkbox-button
                  v-if="!isHideQuota(option)"
                  :key="option.value"
                  :label="option.value"
                  :style="{
                    display: item['config'].inline ? 'inline-block' : 'block',
                  }"
                >
                  <span v-if="option.quota <= 0 && item.config.quotaBlankWarning">{{
                    item.config.quotaBlankWarning
                  }}</span>
                  <span v-else>{{ option.label }}</span>
                  <span class="text-base-color" v-if="showQuota(option)"
                    >(余{{ option.quota }})</span
                  >
                </el-checkbox-button>
              </template>
            </template>-->
    </el-checkbox-group>
  </div>
</template>

<script>
import Vote from '../TVote/vote'
import mixin from '../mixin'
import VoteMixin from '../TVote/VoteMixin'
import TCheckbox from './TCheckbox'
import optionQuotaMixin from '../mixins/OptionQuotaMixin'

export default {
  name: 'TCheckboxGroup',
  mixins: [mixin, VoteMixin, optionQuotaMixin],
  components: {
    Vote,
    TCheckbox
  },
  props: ['models'],
  data() {
    return {
      otherInputValue: ''
    }
  },
  watch: {
    otherInputValue: {
      deep: true,
      handler(val) {
        this.models[`${this.item.vModel}other`] = val

        this.$emit('other-input-change', this.changeValue, this.item)
      }
    }
  },
  mounted() {
    if (this.models) {
      this.otherInputValue = this.models[`${this.item.vModel}other`]
    }
  },
  methods: {
    isChecked(val) {
      return this.changeValue.indexOf(val) > -1
    },
    handleChange(val) {
      if (this.item.disabled) {
        return
      }

      if (!val.length) {
        return
      }

      this.handleArrayVote(this.value)

      const { exclusiveChoiceApiCodes, withExclusiveChoice } = this.item.config

      if (withExclusiveChoice) {
        // 变化的值
        const changeVal = val[val.length - 1]

        // 选中还是取消
        const isChecked = val.findIndex((e) => e.toString() === changeVal.toString())

        // 是否是互斥
        const isExclusive = exclusiveChoiceApiCodes.findIndex((e) => e.toString() === changeVal.toString())

        // 选中 并且 互斥
        if (isChecked > -1 && isExclusive > -1) {
          this.$emit('input', [changeVal])
        }

        // 选中 并且 不互斥
        if (isChecked > -1 && isExclusive === -1) {
          // 不是互斥的值
          const noExclusive = val.filter((e) => {
            const index = exclusiveChoiceApiCodes.findIndex((ex) => ex.toString() === e.toString())
            return index < 0
          })
          this.$emit('input', noExclusive)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.tc-checkbox-group .el-checkbox {
  height: auto;
  padding: 5px 10px;
  line-height: 28px !important;
}

::v-deep .el-checkbox {
  display: flex;

  .el-checkbox__input {
    line-height: 32px !important;
  }

  .el-checkbox__label {
    line-height: 28px !important;
  }
}

.block {
  margin-bottom: 10px;

  .el-checkbox {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block {
  display: inline-block;
  margin-bottom: 10px;
  margin-right: 10px;
  vertical-align: top;

  .el-checkbox {
    width: 100%;
  }

  .other-input {
    margin-top: 10px;
  }
}

.inline-block.show-vote {
  min-width: 156px;
}

.show-vote {
  .other-input {
    margin-top: 0;
  }
}

@media screen and (max-width: 414px) {
  .inline-block.show-vote:nth-child(even) {
    margin-right: 0;
  }
}

.show-vote {
  border-radius: 8px;
  border: 1px solid #dcdfe6;

  .vote-wrap {
    padding: 5px 10px;
  }

  .vote-wrap:empty {
    padding: 0;
  }
}

.checked {
  border-color: #1890ff;
}

.checked.disabled {
  border-color: #dcdfe6;
}

::v-deep .el-checkbox__label {
  width: 90% !important;
  text-overflow: ellipsis;
  white-space: normal;
  word-wrap: break-word;
  display: inline-block;
  vertical-align: middle;
}
</style>
